import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { ArrowUpRight, Activity, CheckCircle } from 'lucide-react';

const DATA_TREND = [
  { name: 'Mon', issues: 40, fixed: 24 },
  { name: 'Tue', issues: 30, fixed: 13 },
  { name: 'Wed', issues: 20, fixed: 48 },
  { name: 'Thu', issues: 27, fixed: 39 },
  { name: 'Fri', issues: 18, fixed: 48 },
  { name: 'Sat', issues: 23, fixed: 38 },
  { name: 'Sun', issues: 34, fixed: 43 },
];

const DATA_SEVERITY = [
  { name: 'Critical', value: 12, color: '#F43F5E' },
  { name: 'Warning', value: 45, color: '#F59E0B' },
  { name: 'Info', value: 88, color: '#3B82F6' },
];

export const Dashboard: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Quality Overview</h1>
        <p className="text-slate-500 mt-2">Monitor code quality metrics and scan trends across all projects.</p>
      </div>

      {/* Stat Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[
          { label: 'Total Scans', value: '1,284', trend: '+12%', icon: Activity, color: 'text-indigo-600', bg: 'bg-indigo-50' },
          { label: 'Issues Resolved', value: '892', trend: '+5%', icon: CheckCircle, color: 'text-emerald-600', bg: 'bg-emerald-50' },
          { label: 'Critical Issues', value: '12', trend: '-2%', icon: ArrowUpRight, color: 'text-rose-600', bg: 'bg-rose-50' },
        ].map((stat, idx) => (
          <div key={idx} className="glass-panel rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-sm font-medium text-slate-500">{stat.label}</p>
                <h3 className="text-3xl font-bold text-slate-800 mt-2">{stat.value}</h3>
              </div>
              <div className={`p-3 rounded-xl ${stat.bg}`}>
                <stat.icon className={`w-6 h-6 ${stat.color}`} />
              </div>
            </div>
            <div className="mt-4 flex items-center gap-2">
              <span className={`text-xs font-bold ${stat.trend.startsWith('+') ? 'text-emerald-600' : 'text-rose-600'}`}>
                {stat.trend}
              </span>
              <span className="text-xs text-slate-400">from last week</span>
            </div>
          </div>
        ))}
      </div>

      {/* Charts Section */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 glass-panel rounded-2xl p-6 shadow-sm">
          <h3 className="text-lg font-semibold text-slate-800 mb-6">Issue Trend Analysis</h3>
          <div className="h-72 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={DATA_TREND} barGap={8}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748B', fontSize: 12 }} dy={10} />
                <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748B', fontSize: 12 }} />
                <Tooltip 
                    contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 4px 20px -2px rgba(0, 0, 0, 0.1)' }}
                    cursor={{ fill: '#F1F5F9' }}
                />
                <Bar dataKey="issues" name="New Issues" fill="#6366F1" radius={[4, 4, 0, 0]} barSize={20} />
                <Bar dataKey="fixed" name="Fixed Issues" fill="#CBD5E1" radius={[4, 4, 0, 0]} barSize={20} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="glass-panel rounded-2xl p-6 shadow-sm">
          <h3 className="text-lg font-semibold text-slate-800 mb-6">Severity Distribution</h3>
          <div className="h-64 w-full flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={DATA_SEVERITY}
                  innerRadius={60}
                  outerRadius={80}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {DATA_SEVERITY.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="flex justify-center gap-4 mt-4">
             {DATA_SEVERITY.map(item => (
                 <div key={item.name} className="flex items-center gap-2">
                     <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }}></div>
                     <span className="text-xs text-slate-500 font-medium">{item.name}</span>
                 </div>
             ))}
          </div>
        </div>
      </div>
    </div>
  );
};